<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>班级管理</title>
    <link rel="stylesheet" href="../css/mdui.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 登出按钮 -->
                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '退出登录'}">
                                <i class="mdui-icon material-icons">exit_to_app</i>
                </span>

            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->
    <p><br></p>
    <article class="mdui-container mdui-clearfix">

        <div class="mdui-row mdui-m-b-2">

            <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo" mdui-dialog="{target: '#add-class',modal:'true'}">新增班级</button>
        </div>
        <!-- 新增用户对话框 -->
        <div class="mdui-dialog" id="add-class">
            <div class="mdui-dialog-title">新增班级</div>
            <div class="mdui-dialog-content">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">班级名称</label>
                    <input class="mdui-textfield-input" type="text" required/>
                    <div class="mdui-textfield-error">此填写项不能为空</div>
                </div>
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple">保存</button>
            </div>
        </div>
        <!-- 删除班级对话框 -->
        <div class="mdui-dialog" id="delete-class">
            <div class="mdui-dialog-title">删除班级</div>
            <div class="mdui-dialog-content">
                您确认要删除此班级吗？
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple">确认</button>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>班级名称</th>
                            <th>班级人数</th>
                            <th class="mdui-text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>计科1601</td>
                            <td>0</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-class',modal:'true'}">
                                           修改
                                    </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-class'}">
                                        删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>计科1602</td>
                            <td>15</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-class',modal:'true'}">
                                        修改
                                    </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-class'}">
                                        删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>计科1603</td>
                            <td>22</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-class',modal:'true'}">
                                                   修改
                                        </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-class'}">
                                                删除
                                        </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 修改班级对话框 -->
            <div class="mdui-dialog" id="change-class">
                <div class="mdui-dialog-title">修改班级</div>
                <div class="mdui-dialog-content">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">班级名称</label>
                        <input class="mdui-textfield-input" type="text" required/>
                        <div class="mdui-textfield-error">此填写项不能为空</div>
                    </div>
                </div>
                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                    <button class="mdui-btn mdui-ripple">保存</button>
                </div>
            </div>
        </div>

    </article>

    <!-- 左侧侧边栏 -->
    <aside>
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-collapse="{accordion: true}" class="mdui-list">
                <a href="./index.html">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">home</i>
                        <div class=" mdui-list-item-content "> 首页 </div>
                    </li>
                </a>
                <a href="./student-info.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">people</i>
                        <div class="mdui-list-item-content ">学生信息管理</div>
                    </li>
                </a>
                <a href="./teacher-info.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">person</i>
                        <div class="mdui-list-item-content ">教师信息管理</div>
                    </li>
                </a>

                <a href="./department.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">assignment_ind</i>
                        <div class="mdui-list-item-content ">院系管理</div>
                    </li>
                </a>

                <a href="./grade.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">view_week</i>
                        <div class="mdui-list-item-content ">年级管理</div>
                    </li>
                </a>

                <a href="./class.html">
                    <li class="mdui-list-item mdui-ripple mdui-list-item-active">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">map</i>
                        <div class="mdui-list-item-content ">班级管理</div>
                    </li>
                </a>

                <a href="./message.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">mode_comment</i>
                        <div class="mdui-list-item-content ">留言管理</div>
                    </li>
                </a>
                <a href="./notice.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">assignment</i>
                        <div class="mdui-list-item-content ">公告管理</div>
                    </li>
                </a>

            </ul>
        </nav>
    </aside>


    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../js/mdui.js"></script>
</body>

</html>